import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Switch, Redirect } from 'react-router'
import { PrivateRoute } from 'components/route'
import { Query, Subscription } from 'react-apollo'
import { global as globalDuck, dataset as datasetDuck } from 'ducks'
import User from 'containers/users'
import GetCurrentOrgMember from 'graphql/org/currentOrgMember.graphql'
import Loading from 'components/loading'
import Project from './projectList'
import Dash from './dashboard'
import Dataset from './datasetList'
import NewDataset from './newDataset'
import NewProject from './newProject'
import Nav from './orgNav'

class Org extends Component {
  state = { activeItem: '' }

  componentDidMount = () => {
    const { actionSetActiveNavItem } = this.props
    actionSetActiveNavItem('org')
  }

  setActiveItem = item => this.setState({ activeItem: item })

  render() {
    const { location, match, user } = this.props
    const { orgName } = match.params
    const { activeItem } = this.state
    return (
      <Subscription subscription={GetCurrentOrgMember} variables={{ orgName, userId: user.id }}>
        {({ data, loading, error }) => {
          if (loading) return <Loading />
          if (error) return `Error! ${error.message}`
          const org = data.org_member[0]
          if (!org) return <Loading />
          return (
            <React.Fragment>
              <Nav activeItem={activeItem} org={org} />
              <Switch location={location}>
                <Redirect exact path={`${match.url}`} to={`${match.url}/project`} />
                <PrivateRoute
                  path={`${match.url}/dashboard`}
                  render={props => (
                    <Dash {...props} setParentActiveItem={this.setActiveItem} org={org} />
                  )}
                  exact
                />
                <PrivateRoute
                  path={`${match.url}/dataset`}
                  render={props => (
                    <Dataset
                      {...props}
                      setParentActiveItem={this.setActiveItem}
                      orgName={orgName}
                    />
                  )}
                  exact={false}
                />
                <PrivateRoute
                  path={`${match.url}/newDataset`}
                  render={props => (
                    <NewDataset {...props} setParentActiveItem={this.setActiveItem} org={org} />
                  )}
                  exact={false}
                />
                <PrivateRoute
                  path={`${match.url}/newProject`}
                  render={props => (
                    <NewProject {...props} setParentActiveItem={this.setActiveItem} org={org} />
                  )}
                  exact={false}
                />
                <PrivateRoute
                  path={`${match.url}/user`}
                  render={props => (
                    <User {...props} setParentActiveItem={this.setActiveItem} org={org} />
                  )}
                  exact={false}
                />
                <PrivateRoute
                  path={`${match.url}/project`}
                  render={props => (
                    <Project {...props} setParentActiveItem={this.setActiveItem} org={org} />
                  )}
                  exact
                />
                <Redirect from="*" to={`${match.url}`} />
              </Switch>
            </React.Fragment>
          )
        }}
      </Subscription>
    )
  }
}

const mapStateToProps = state => ({
  user: globalDuck.selectors.user(state),
})

const mapDispatchToProps = {
  actionSetActiveNavItem: globalDuck.creators.actionSetActiveNavItem,
  actionReciveDatasets: datasetDuck.creators.actionReciveDatasets,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Org)
